<template>
  <text class="sub-title"> — 管理员个人信息</text>
  <title1></title1>
  <Navigation></Navigation>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
          <span>
            <el-icon style="margin-left:10px;"><User/></el-icon>管理员 {{UserName}}
          </span>
      </div>
    </template>
    <el-row>
      <el-col :span="12">
        <el-form label-position="left" label-width="80px">
          <el-form-item label="学号">
            <el-tooltip
                class="box-item"
                effect="light"
                content="可以更改"
                placement="right"
            >
              <el-input v-model="form.stu_id"  :disabled="!isEditing"></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="姓名">
            <el-tooltip
                class="box-item"
                effect="light"
                content="可以更改"
                placement="right"
            >
              <el-input  v-model="form.stu_name"  :disabled="!isEditing"></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="性别">
            <el-tooltip
                class="box-item"
                effect="light"
                content="可以更改"
                placement="right"
            >
              <el-input v-model="form.stu_sex"  :disabled="!isEditing"></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="年龄">
            <el-tooltip
                class="box-item"
                effect="light"
                content="可以更改"
                placement="right"
            >
              <el-input v-model="form.stu_age"  :disabled="!isEditing"></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-tooltip
                class="box-item"
                effect="light"
                content="可以更改"
                placement="right"
            >
              <el-input v-model="form.stu_email"  :disabled="!isEditing"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-button type="primary" @click="Refresh">刷新</el-button>
    <template v-if="!isEditing">
      <el-button type="primary" @click="enableEditing">修改</el-button>
    </template>
    <template v-else>
      <el-button type="success" @click="open">保存</el-button>
      <el-button type="warning" @click="cancelEdit">取消</el-button>
    </template>
  </el-card>

</template>

<script>
import {el} from 'element-plus/es/locales.mjs';
import title1 from "../components/title.vue";
import Navigation from "../components/navigation_adm.vue";
import {User} from "@element-plus/icons-vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: 'adm_sinfo',
  components: {User, Navigation, title1},
  data() {
    return {
      sno: '',
      isEditing: false,
      originalForm: {}, //存原数据
      form: {
        stu_id: '',
        stu_name: '',
        stu_sex: '',
        stu_age: '',
        stu_major: '',
        stu_time: '',
        stu_email: ''
      },
    }
  },
  methods: {
    async search() {
      try {
        const token = localStorage.getItem('token'); // 确保 token 已正确存储
        const userNo = sessionStorage.getItem('UserNo'); // 确保 UserNo 已正确存储
        if (!token || !userNo) {
          alert('缺少必要的认证信息，请重新登录。');
          await this.$router.push({name: "Login"});
          return;
        }
        const response = await axios.post(`${import.meta.env.VITE_API_BASE_URL}/student/showStudentInfo`, null, {
          params: {
            User_no: this.sno
          },
          headers: {
            token: token,
            'Content-Type': 'application/json'
          },
        });
        console.log(response.data.code)
        if (response.data.code === '200') {
          ElMessage({
            message: '查询成功',
            type: 'success',
          });
          console.log(response.data)
          this.form.stu_id = response.data.data.s_no;
          this.form.stu_name = response.data.data.s_name;
          this.form.stu_sex = response.data.data.s_sex;
          this.form.stu_age = response.data.data.s_age;
          this.form.stu_phone = response.data.data.s_phone;
          this.form.stu_major = response.data.data.s_major;
          this.form.stu_time = response.data.data.s_time;
          this.form.stu_email = response.data.data.s_email;
        } else {
          ElMessage({
            message: '查询出错，请检查是否选定了时间和类型 或 是否有课程',
            type: 'error',
          });
        }
      } catch (error) {
        console.error('查询失败', error);
        alert('查询出错，请稍后再试');
      }
    },
    enableEditing() {
      this.isEditing = true; // 启用编辑模式
    },
    async saveInfo() {
      //*添加保存逻辑，例如调用 API 保存数据
      try {
        const response = await axios.post(`${import.meta.env.VITE_API_BASE_URL}/student/modifyStudentInfo`,

            {
              s_email: this.form.stu_email
            },

            {
              headers: {
                token: localStorage.getItem('token')
              }
            });
        if (response.data.code === '200') {
          ElMessage({
            type: 'success',
            message: '保存成功'
          });
        } else {
          ElMessage({
            type: 'error',
            message: '保存失败'
          });
        }
      } catch (error) {
        console.error('保存信息失败', error);
        alert('保存信息出错，请稍后再试');
      }
      this.getinfo(); // 重新获取数据
      // 保存成功后设置 isEditing 为 false
      this.isEditing = false;

    },
    cancelEdit() {
      this.getinfo(); // 重新获取数据
      this.isEditing = false; // 取消编辑模式
    },
    open() {
      ElMessageBox.confirm(
          '确定保存吗',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            this.saveInfo() // 若确认，转入saveInfo

          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消保存',
            })
          })
    },
    Refresh() {
      this.getinfo();
      ElMessage({
        type: 'success',
        message: '刷新成功',
      })
    }
  },
  mounted() {
    document.title = '管理员后台系统'; // 动态设置页面标题
    const token = localStorage.getItem('token'); // 确保 token 已正确存储
    const userNo = sessionStorage.getItem('UserNo'); // 确保 UserNo 已正确存储
    if (!token || !userNo) {
      alert('缺少必要的认证信息，请重新登录。');
      this.$router.push({ name: "Login" });
    }
  }
}
</script>

<style scoped>
.sub-title {
  z-index: 2;
  position: fixed;
  top: 35px;
  left: 380px;
  color: #0e4bbd;
  font-size: 30px;
  font-weight: normal;
}

.box-card {
  position: fixed;
  top: 100px;
  width: 80%;
  left: 280px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>